<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./js/jQuery-min.js"></script>
    <script src="./js/scroll.js"></script>
    <script src="./js/chat.js"></script>
    <script src="./js/jquery.mousewheel.js"></script>

    <script src="./js/jquery-ui.min.js"></script>
</head>
<style>
     ::-webkit-scrollbar {
        width: 4px;
        height: 100%;
        background: rgb(182, 182, 182);
    }
    
     ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgb(105, 105, 105);
    }
    
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        list-style: none;
    }
    
    .wrap {
        position: relative;
        width: 50vh;
        height: 80vh;
        margin: 10vh auto;
        background: rgb(205, 204, 204);
        border-radius: 15px;
        overflow: hidden;
        border: solid rgb(138, 138, 138) 2px;
    }
    
    .chat-head {
        height: 9%;
        background: linear-gradient(to right, rgb(233, 225, 241), rgb(9, 2, 36));
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: rgb(255, 255, 255);
        font-weight: 700;
    }
    
    .chat-body {
        padding: 10px;
        height: 66vh;
        background: rgb(206, 206, 206);
        overflow: auto;
    }
    
    .chat-body ul li {
        overflow: hidden;
        margin-bottom: 10px;
    }
    
    .chat-body ul .woman .img-box1 {
        width: 12%;
        height: 100%;
        float: left;
        margin-right: 3%;
    }
    
    .chat-body ul .woman .img-box1 img {
        width: 100%;
        border-radius: 20%;
    }
    
    .chat-body ul .woman img {
        vertical-align: top;
        width: 30px;
    }
    
    .woman .chat-content {
        position: relative;
        /* display: inline-block; */
        padding-left: 10px;
        margin-top: 7px;
        height: 20%;
        padding: 3px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 600;
        width: 80%;
        float: left;
    }
    
    .woman .chat-content span {
        display: inline-block;
        height: 100%;
        background: #95ec69;
        padding: 5px;
        border-radius: 7px;
    }
    
    .woman .chat-content img {
        width: 3px;
        position: absolute;
        top: -10px;
        left: -13px;
        transform: scale(.4, .4);
    }
    
    .chat-body ul .man img {
        width: 30px;
    }
    
    .man .chat-content {
        float: right;
        position: relative;
        padding-right: 10px;
        margin-top: 3px;
        margin-right: 10px;
        height: 20%;
        padding: 3px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 600;
        width: 80%;
    }
    
    .man .chat-content span {
        /* display: inline-block; */
        height: 100%;
        background: rgb(255, 255, 255);
        padding: 5px;
        border-radius: 7px;
        float: right;
    }
    
    .chat-body ul .man .img-box1 {
        float: right;
    }
    
    .man .chat-content img {
        width: 3px;
        position: absolute;
        top: -8px;
        right: -15px;
        transform: scale(.4, .4);
    }
    
    .chat-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 8%;
        background: rgb(255, 255, 255);
        padding: 5px;
    }
    
    .chat-footer img {
        vertical-align: middle;
        width: 8%;
        margin: 5px;
    }
    
    .chat-footer input {
        background: #F2F2F0;
        height: 30px;
        width: 64%;
        border-radius: 9px;
        margin: 0 6px;
        outline: none;
        border: none;
        padding-left: 10px;
        font-size: 12px;
        font-weight: 700;
    }
    
    .sendmsg {
        width: 15%;
        height: 30px;
        border-radius: 5px;
        border: none;
        background:#e9e9e9 ;
        color: #95ec69;
        font-size: 14px;
    }
    
    #header {
        width: 10%;
        border-radius: 20%;
    }
</style>

<body>
    <div class="wrap">
        <div class="chat-head">
            <span>科隆同学</span>
            <img id="header" src="./img/科隆同学.jpg" alt="">
        </div>
        <div class="chat-body">
            <ul>
                <audio src="" autoplay style="display: none;"></audio>
                <li class="woman">
                    <div class="img-box1"><img src="./img/科隆同学.jpg" alt=""></div>
                    <div class="chat-content"><img src="./img/corner01.png" alt=""><span>Glad to see you!</span></div>
                </li>
            </ul>
        </div>
        <div class="chat-footer"><img src="./img/person03.jpg" alt=""><input type="text" placeholder="说点啥吧......." class="talk"><button class="sendmsg">submit</button></div>
    </div>
</body>

</html>